import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

import "./main-drawer.ts"
import  "./main-header.ts"
import "@route/index.ts"

// 使用 @customElement 装饰器定义组件名称
@customElement('main-layout')
export class MainLayout extends LitElement {

  // 定义组件的样式
  static styles = css`
      :host {
          display: flex;
          flex-direction: column;
          height: 100vh; /* 使组件占满整个视口高度 */
          margin: 0;
          background-color: white;
          color: black;
          font-family: Arial, sans-serif;
      }

      .container {
          display: flex;
          flex: 1; /* 使容器占满剩余空间 */
      }

      main-header {
          height: 70px; /* 顶部标题栏高度 */
          display: flex;
          align-items: center;
          padding: 0 16px;
      }

      main-drawer {
          width: 180px; /* 左侧菜单栏宽度 */
      }

      router-host {
          flex: 1; /* 右侧路由组件占满剩余空间 */
          padding: 16px;
          background-color: #fff;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <main-header></main-header>
      <div class="container">
        <main-drawer></main-drawer>
        <router-host></router-host>
      </div>
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'main-layout': MainLayout;
  }
}